<%@ include file="/WEB-INF/views/jsp/include/include.jsp"%>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
    <meta charset="utf-8">
    <title>Hand In Hand</title>
    <%@ include file="/WEB-INF/views/jsp/include/head.jsp"%>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
    <script type="text/javascript" src="<c:url value="/resources/js/googleMaps.js"/>"></script>
    
    <link href="<c:url value='/resources/css/googleMaps.css' />" rel="stylesheet" type="text/css" >
</head>
<!-- Load jQuery and bootstrap datepicker scripts -->
<script type="text/javascript">
	// When the document is ready
	$(document).ready(function() {
		$('#datePicker').datepicker({
			format : "dd/mm/yyyy"
		});
		$('#datePicker2').datepicker({
			format : "dd/mm/yyyy"
		});
		$('.clockPicker').clockpicker();
		$('.clockPicker2').clockpicker();
	});
</script>
<script type="text/javascript">

$( document ).ready(function() {
	$("#eventUpdateForm").submit( function(event) {
		$('#selectedTags').val($("input[name='hiddenTagList']").val());

	});
	$("body").keypress(function(e) {
		if (e.keyCode == '13') {
			e.preventDefault();
		}
	});
});
$(function () {
    $(".tagsManager").tagsManager({
         prefilled: $('#selectedTags').val(),
         CapitalizeFirstLetter: true,
         preventSubmitOnEnter: true,
         typeahead: true,
         typeaheadAjaxSource: null,
         typeaheadSource: null,
         delimeters: [44, 188, 13],
         backspace: [8],
         blinkBGColor_1: '#FFFF9C',
         blinkBGColor_2: '#CDE69C',
         hiddenTagListId: 'hiddenTagList',
         hiddenTagListName: 'hiddenTagList',
         replace: true,
         tagsContainer: $('.tagList'),
         maxTags: 15
     });
});
</script>

<body>
	<%@ include file="/WEB-INF/views/jsp/include/header.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/navigator.jsp"%>

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<h3 class="header">Edit Event</h3>
			<form:form id="eventUpdateForm" modelAttribute="eventUpdateForm"  method="post" action="./updateEvent">
			<div class="row">
				<div class="col-xs-5 col-xs-offset-1">
					<div class="row">
						<div class="col-xs-12">
							<label>Name : </label>
							<form:input path="event.name" type="text" class="form-control" cssErrorClass="form-control inputError"/>
							<form:errors path="event.name" cssClass="errorMessage" />
						</div>
					</div>
					<div class="row">
						<div class="col-xs-7">
							<label>Starting Date : </label>
			 				<form:input path="startingDay" type="text" class="form-control" cssErrorClass="form-control inputError" id="datePicker" />
							<form:errors path="startingDay" cssClass="errorMessage" />
						</div>
						<div class="col-xs-5">
							<label>Starting Time : </label>
							<div class="input-group clockpicker" id="clockPicker" data-placement="top" data-autoclose="true">
			   					<form:input path="startingHour"  id="startingHour" type="text" class="form-control" cssErrorClass="form-control inputError"/>
			   					<form:errors path="startingHour" cssClass="errorMessage" />
			   				</div>
		   				</div>
	   				</div>
	   				<div class="row">
	   					<div class="col-xs-7">
							<label>Ending Date : </label>
			 				<form:input path="endingDay" type="text" class="form-control" cssErrorClass="form-control inputError" id="datePicker2" />
							<form:errors path="endingDay" cssClass="errorMessage" />
						</div>
						<div class="col-xs-5">
							<label>Ending Time : </label>
							<div class="input-group clockpicker" id="clockPicker2" data-placement="top" data-autoclose="true">
			   					<form:input path="endingHour" id="endingHour" type="text" class="form-control" cssErrorClass="form-control inputError"/>
			   					<form:errors path="endingHour" cssClass="errorMessage" />
			   				</div>
		   				</div>
	   				</div>
	   				
	   				<label>Location : </label>
					<form:input path="event.location" id="pac-input" class="controls" cssErrorClass="controls inputError" type="text"/>
	                <form:errors path="event.location" cssClass="errorMessage" />
	                <div id="map-canvas"></div>
	                <form:input hidden="true" id="lat" path="event.latitude" />
	                <form:input hidden="true" id="long" path="event.longitude" />
				</div>
				<div class="col-xs-5">
					<br>
					<div class="row">
						<img class="col-xs-4 col-xs-offset-1" src=<c:url value="/resources/images/community-icon.png"/>/>
						<div class="col-xs-7">
							<h5>Upload a picture for your event</h5>
							<button class="btn btn-primary" type="button"> + Upload</button>
						</div>
					</div>
					<br>
					<div class="row">
						<div class="col-xs-12">
							<label>Information : </label>
                			<form:textarea path="event.description" class="form-control" cssErrorClass="form-control inputError"/>
							<form:errors path="event.description" cssClass="errorMessage" />
						</div>
					</div>
					<div class="row">
						<div class="col-xs-12">
							<div id="tags" class="box">
								<label>Tags</label>
							 	<input type="text" name="tags" placeholder="Tags" class="tagsManager tm-input-success tm-input-small" />
								<div class="tagList"></div> 
								<form:input hidden="true" id="selectedTags" path="selectedTags" />
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-xs-12">
							<br>
							<button class="btn btn-primary" type="submit">Update Event</button>
						</div>
					</div>
				</div>
			</div>
			</form:form>
			</div>
			<hr>
		</div>	
	</div>
	
	<%@ include file="/WEB-INF/views/jsp/include/footer.jsp"%>
</body>
</html>